<template>
  <div class="detail-box">
    <topBar>
      <template #title>
        <div class="topBa-title">黑马头条</div>
      </template>
      <template #left>
        <van-icon
          @click="$router.go(-1)"
          class-prefix="toutiao-youjiantou toutiao"
          name="extra"
        />
      </template>
    </topBar>
    <div class="main">
      <h2 class="title">{{ detailContent.title }}</h2>
      <div class="user">
        <div class="img"><img :src="detailContent.aut_photo" alt="" /></div>
        <div class="user-text">
          <div class="name">{{ detailContent.aut_name }}</div>
          <div class="time">{{ detailContent.pubdate | dateYer }}年前</div>
        </div>
        <div class="interest">
          <div
            class="interest-btn is_followed"
            v-if="detailContent.is_followed"
            @click="followed"
          >
            已关注
          </div>
          <div class="interest-btn" v-else @click="followed">
            <van-icon class="icon-plus" name="plus" /> 关注
          </div>
        </div>
      </div>
      <div
        class="content-container markdown-body"
        v-html="detailContent.content"
      ></div>
      <div class="finish">正文结束了</div>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <ComMent
          v-for="(item, index) in comment"
          :key="index"
          :item="item"
        ></ComMent>
      </van-list>
      <!-- <div class="no-more">没有更多了</div> -->
    </div>

    <div class="footer">
      <div class="input" @click="show = true">写评论</div>
      <div class="comment pinglun">
        <div class="label">{{ detailContent.comm_count }}</div>
        <van-icon class-prefix="toutiao toutiao-pinglun" />
      </div>
      <div class="comment">
        <van-icon
          class-prefix="toutiao toutiao-shoucang "
          :class="{ shoucang: detailContent.is_collected }"
        />
      </div>
      <div class="comment">
        <van-icon class-prefix="toutiao toutiao-dianzan" />
      </div>

      <div class="comment">
        <van-icon class-prefix="toutiao toutiao-fenxiang" />
      </div>
    </div>
    <van-popup v-model="show" position="bottom" :style="{ height: '20%' }">
      <template>
        <div class="comment-input">
          <div class="input-text">
            <van-field
              v-model="message"
              rows="2"
              autosize
              type="textarea"
              maxlength="50"
              placeholder="请输入评论"
              show-word-limit
            />
          </div>
          <div class="btn">
            <div @click="publish">发布</div>
          </div>
        </div>
      </template>
    </van-popup>
  </div>
</template>

<script>
import {
  getDetailData,
  getConmment,
  publish,
  followed,
  unfollow,
} from '@/api/home'

export default {
  name: '',
  components: {},
  props: {
    id: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      detailContent: {},
      loading: false,
      finished: false,
      comment: [],
      params: {
        type: 'a',
        source: null,
        limit: 10,
        offset: null,
      },
      show: false,
      message: '',
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getDetailData()
  },
  methods: {
    async getDetailData() {
      const id = this.id
      const {
        data: { data },
      } = await getDetailData(id)
      console.log(data)
      this.detailContent = data
      this.params.source = data.art_id
    },
    async getConmmentData() {
      console.log(this.params)

      const {
        data: { data },
      } = await getConmment(this.params)
      if (data.results.length === 0) this.finished = true
      this.params.offset = data.end_id || null
      this.comment = [...this.comment, ...data.results]
    },
    async onLoad() {
      console.log(this.comment)
      this.loading = true
      // setTimeout(() => {
      if (this.finished) {
        this.finished = true
      } else {
        await this.getConmmentData()
      }
      this.loading = false
      // }, 500)
    },
    async publish() {
      try {
        await publish({
          art_id: null,
          content: this.message,
          target: this.id,
        })
        this.$toast.success('发布成功')
        this.show = false
        this.finished = false
        this.getDetailData()
        this.getConmmentData()
      } catch (error) {
        this.$toast.fail('发布失败')
      }
    },
    async followed() {
      if (this.detailContent.is_followed) {
        await unfollow(this.detailContent.aut_id)
      } else {
        await followed({ target: this.detailContent.aut_id })
      }
      this.getDetailData()
    },
  },
}
</script>

<style scoped lang="less">
.topBa-title {
  color: #fff;
}
.toutiao {
  color: #fff;
}
.detail-box {
  padding-top: 46px;
  // padding-bottom: 44px;
  .main {
    padding: 25px 16px 44px;
    .title {
      margin-bottom: 25px;
    }
    .user {
      display: flex;
      .img {
        width: 35px;
        height: 35px;
        margin-right: 10px;
        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
      .user-text {
        font-size: 12px;
        .name {
          color: #3a3a3a;
        }
        .time {
          color: #b7b7b7;
          margin-top: 5px;
        }
      }
      .interest {
        text-align: right;
        flex: 1;
        .interest-btn {
          display: inline-block;
          height: 28px;
          width: 85px;
          background-color: #3296fa;
          border-radius: 14px;
          color: #fff;
          text-align: center;
          font-size: 14px;
          line-height: 28px;
          vertical-align: middle;
          .icon-plus {
            font-size: 16px;
            font-weight: 500;
          }
        }
      }
      .content-container {
        padding: 27px 0;
        width: 100vw;
        // font-size: 12px;
      }
    }

    .finish,
    .no-more {
      box-sizing: border-box;
      font-size: 16px;
      text-align: center;
      margin: 16px 0;
      color: #969799;
    }
    .finish {
      margin-bottom: 32px;
    }
  }
}
.footer {
  box-sizing: border-box;
  position: fixed;
  bottom: 0;
  width: 100vw;
  border-top: 2px solid #ccc;
  height: 45px;
  background-color: #fff;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 16px;
  .input {
    height: 23px;
    width: 141px;
    border: 1px solid #eee;
    border-radius: 12px;
    text-align: center;
    line-height: 23px;
    color: #a7a7a7;
  }
  // .comment {
  //   width: 20px;
  // }
  .pinglun {
    position: relative;
    .label {
      box-sizing: border-box;
      position: absolute;
      top: -7px;
      left: 10px;
      border: 1px solid #ccc;
      border-radius: 50%;
      font-size: 12px;
      color: #fff;
      background-color: #c00000;
      min-width: 18px;
      height: 18px;
      text-align: center;
      line-height: 16px;
    }
  }

  .toutiao {
    color: #a7a7a7;
    font-size: 20px;
  }
}
.comment-input {
  padding: 16px 16px 0;
  display: flex;
  .input-text {
    width: 298px !important;
    .van-cell.van-field {
      background-color: #eee;
    }
  }
  .btn {
    height: 88px;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    .div {
      color: #6ba3d8;
    }
  }
}
.is_followed {
  background-color: #fff !important;
  color: #000 !important;
  border: 1px solid #eee;
}
.shoucang {
  color: orange !important;
}
</style>
